<template>
    <div id="app">
      <div v-for="item in tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
        <div class="main_content">
          <div class="box_content">
            <div>
              <!--img-->
              <div class="img_content">
                <img  src="../assets/hot_logo.jpg" alt="">
              </div>
              <!--title-->
              <div class="title_content">
                <span>{{item.name}}</span>
                <br>
                <span style="font-size: 1px;color: rgba(207,214,227,0.94)">{{item.time}}</span>
              </div>
              <!--button-->
              <div class="button_content">
                <el-button icon="el-icon-plus" type="warning" size="small" plain round>关注</el-button>
              </div>
              <!--content-->
              <div class="main">
                  <span>{{item.content}}</span>
              </div>
              <!--lun-->
              <div class="lun_content">
                <img :src="'static/img/'+item.img" alt="">
              </div>
            </div>
            <!--bottom-->
            <div class="bottom_content">
              <div class="icon1" >
                <i class="el-icon-link"></i>
              </div>
              <div class="icon">
                <i class="el-icon-chat-dot-round"></i>
              </div>
              <div class="icon">
                <i class="el-icon-star-off"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
    export default {
        name: "Top",
      data(){
        return{
          currentPage:1, //初始页
          pageSize:5,    //每页的数据
          tableData: [{}],
        }
      },
      methods:{
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
          this.pagesize = size;
          console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
          this.currentPage = currentPage;
          console.log(this.currentPage)  //点击第几页
        },

        /*查询所有信息*/
        SelectAll(){
          let _this = this
          this.$axios.get("http://localhost:8050/infor/queryById/"+1).then(function(res){
            _this.tableData = res.data
            console.log(res.data)
          }).catch(function (err) {
            alert('查询失败')
          })
        },

      },
      created() {
        this.SelectAll();
        this.selectInfo(this.$route.params.mix)
      }
    }
</script>

<style scoped>
  .bottom_content .icon1{
    margin-left: 40px;
    float: left;
    font-size: 20px;
    color: rgba(196,218,227,0.94)
  }
  .bottom_content .icon{
    margin-left: 220px;
    float: left;
    font-size: 20px;
    color: rgba(196,218,227,0.94)
  }
  .lun_content{
    float: left;
    border-radius: 5px;
    margin-left: 66px;
  }
  .lun_content img{
    border-radius: 5px;
    width: 180px;
    height: 180px;
  }

  .bottom_content{
    padding-top: 15px;
    margin-left: 20px;
    height: 30px;
    width: 600px;
    float: left;
  }
  .main span{
    width: 550px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .main{
    margin-left: 10px;
    margin-top: 20px;
    float: left;
    width: 550px;
    height: 70px;
  }

  .button_content{
    float: right;
    margin-right: 20px;
  }

  .title_content span{
    font-size: 14px;
    font-weight: bold;
  }

  .title_content{
    float: left;
    height: 20px;
    width: 150px;
    margin-top: 6px;
    margin-left: 10px;
  }

  .img_content img{
    height: 50px;
    width: 50px;
    border-radius: 50px;
    margin-left: 10px;
  }
  .img_content{
    float: left;
    height: 50px;
    width: 60px;
  }

  .main_content{
    padding: 20px 10px 5px 10px;
    margin-top: 10px;
    height: 355px;
    width: 638px;
    background-color: white;
  }
  .box_content{

    width: 638px;
    height: 290px;
  }
</style>
